<template>
	<view>
    <!-- 
      用户中心：两种状态
        1. 用户已经授权登录
        2. 用户没有登录
    -->
    <view class="user_empty" v-if="!userInfo.nickName">
      <button @tap="goToAuth">去登录</button>
    </view>
      <!-- 用户头像和用户名展示 -->
    <view class="user_info" v-else>
      <image class="user_info_image_bg" :src="userInfo.avatarUrl" mode="aspectFill"></image>
      <image class="user_info_image" :src="userInfo.avatarUrl" mode="aspectFill"></image>
      <text class="user_info_text">{{ userInfo.nickName }}</text>
    </view>
    <view class="">
      <button @tap="makeCall">点击拨打客服电话</button>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{}
			}
		},
		onShow() {
      const userInfo =  uni.getStorageSync('userInfo') || {};
      this.userInfo = userInfo;
		},
		methods: {
      goToAuth(){
        uni.navigateTo({
          url:"/pages/auth/index"
        })
      },
      makeCall(){
        uni.makePhoneCall({
          phoneNumber: '110'
        })
      }
		}
	}
</script>

<style lang="less">
  .user_empty{
    
  }
	.user_info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 330rpx;
    position: relative;
    overflow: hidden;
    .user_info_image_bg{
      position: absolute;
      left: -5%;
      top: -5%;
      width: 110%;
      height: 110%;
      filter: blur(10px);
      z-index: -1;
    }
    .user_info_image{
      width: 172rpx;
      height: 172rpx;
      border-radius: 50%;
    }
  }
</style>
